<template>
  <div>
    <div class="title_box">
      <div class="iconfont icon-left" @click="$router.push('/home')"></div>
      <div class="title">购物车</div>
      <div @click="editFun">{{text}}</div>
    </div>
    <div class="list" v-if="goodsData.length != 0">
      <ul>
        <li v-for="(item, index) in goodsData" :key="index">
          <div class="inp">
            <input
              type="checkbox"
              name="goods"
              class="goodsElect"
              @click="selectGoods"
            />
          </div>
          <div class="left">
            <img :src="item.goodsLogo" alt="" />
          </div>
          <div class="right">
            <div class="goods_name">{{ item.goodsName }}</div>
            <div class="price_num">
              <div class="price">￥{{ item.goodsPrice }}</div>
              <div class="num">
                <span @click="reduce(index)">-</span>
                <span>{{ item.num }}</span>
                <span @click="addNum(index)">+</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="default" v-else>购物车空空如也~</div>

    <div class="settlement-box">
      <div class="occupy"></div>
      <div class="settlement" v-if="edit">
        <div class="left">
          <input type="checkbox" ref="allBtn" @click="selectAll"/>
          <span>全选</span>
        </div>
        <div class="right">
          <div class="total">￥{{total}}</div>
          <span class="btn" @click="settlement">结算</span>
        </div>
      </div>

      <div class="settlement" v-else>
        <div class="left">
          <input type="checkbox" ref="allBtn" @click="selectAll"/>
          <span>全选</span>
        </div>
        <div class="right">
          <div class="total" @click="pushCollect">移入收藏夹</div>
          <span class="btn" @click="delGoods">删除</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog,Toast } from 'vant';
export default {
  data() {
    return {
      goodsData: [], // 购物车商品
      checkGoods: [], // 下单商品
      total: "0.00", // 总价
      edit: true, // 编辑
      text:"编辑"
    };
  },
  methods: {
    // 减少商品数量
    reduce(index) {
      if(this.goodsData[index].num > 1){
        this.goodsData[index].num -= 1;
      }else{
        Dialog.confirm({
          message: '确定从购物车中删除？',
        })
        .then(() => {
            // this.$store.commit("delData",index)
        })
      }
      this.totalFun()
    },
    // 添加商品数量
    addNum(index) {
      this.goodsData[index].num += 1;
      this.totalFun()
    },
    // 全选
    selectAll() {
      let goodsElect = document.querySelectorAll(".goodsElect");
      for (let i = 0; i < goodsElect.length; i++) {
        goodsElect[i].checked = true;
        if(this.$refs.allBtn.checked){
             goodsElect[i].checked = true;
        }else{
             goodsElect[i].checked = false;
        }
      }
      this.selectGoods()
    },
    // 选中商品
    selectGoods() {
      let goodsElect = document.querySelectorAll(".goodsElect");
      for (let i = 0; i < goodsElect.length; i++) {
        if (goodsElect[i].checked) {
          let data = this.$store.getters.getData.carGoods[i];
          this.checkGoods.push(data);
          this.$store.getters.getData.carGoods[i].test = true;
        }else{
          this.checkGoods.splice(i,1);
        }
      }
      // 去重
      let newobj = {};
      this.checkGoods = this.checkGoods.reduce((preVal, curVal) => {
        newobj[curVal.id] ? "" : (newobj[curVal.id] = preVal.push(curVal));
        return preVal;
      }, []);
      this.totalFun()
    },
    // 总价
    totalFun(){
      let goodsList = this.checkGoods;
      if(goodsList.length){
        let data = goodsList.reduce((total,item)=>{
          total = total + item.num * item.goodsPrice
          return total;
        },0)
        this.total = data
      }else if(goodsList.length == 0){
        this.total = "0.00"
      }
    },
    // 编辑
    editFun(){
        this.edit = !this.edit;
        if(this.text == "完成"){
            this.text = "编辑"
        }else{
            this.text = "完成"
        }
    },
    // 删除商品
    delGoods(){
        let goodsElect = document.querySelectorAll(".goodsElect");
        for (let i = 0; i < goodsElect.length; i++) {
          if (goodsElect[i].checked) {
            this.$store.commit("delData",i)
          }
        }
    },
    // 下单
    settlement(){
        if(this.checkGoods.length == 0){
            Toast('请先选择商品哦');
        }else{
            this.$store.commit("checkGoodsFun",this.checkGoods)
            this.$router.push("/confirmation")
            let data = this.$store.getters.getData.carGoods;
            for(let i = 0; i<data.length; i++){
              if(data[i].test){
                this.$store.commit("delData",i)
              }
            }
        }
    },
    // 移入收藏夹
    pushCollect(){
      let data = this.$store.getters.getData.carGoods;
      for(let i = 0; i<data.length; i++){
        if(data[i].test){
          this.$store.commit("collected",data[i].id)
        }
      }
    }

  },
  created() {
    // 获取数据
    this.goodsData = this.$store.getters.getData.carGoods;
    this.selectGoods();
  },
};
</script>

<style lang="less" scoped>
.default{
    text-align: center;
    margin-top: 100px;
}
.settlement-box {
  .occupy {
    height: 50px;
    padding: 10px;
  }
  .settlement {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-top: 2px solid #ebe4e4;
    background: #fff;
    .left {
      input {
        width: 20px;
        height: 20px;
        vertical-align: middle;
        margin-right: 6px;
      }
      span {
        font-size: 18px;
        color: #9d9d9d;
      }
    }
    .right {
      display: flex;
      .total {
        font-weight: bolder;
        margin-right: 10px;
        color: #ff5777;
        font-size: 24px;
      }
      .btn {
        background: #ff5777;
        color: #fff;
        padding: 0px 35px;
        border-radius: 30px;
        font-size: 20px;
      }
    }
  }
}

.list {
  ul {
    li {
      overflow: hidden;
      margin: 10px;
      padding: 10px;
      background: #fff;
      display: flex;
      .inp {
        flex: 1;
        position: relative;
        input {
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          margin: -7px 0px 0px -7px;
        }
      }
      .left {
        width: 160px;
        height: 160px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        width: 62%;
        margin-left: 10px;
        display: flex;
        flex-flow: row wrap;
        align-content: space-between;
        .goods_name {
          font-size: 18px;
        }
        .price_num {
          width: 100%;
          display: flex;
          justify-content: space-between;
          font-size: 16px;
          margin: 10px 0;
          .price {
            font-size: 26px;
          }
          .num {
            height: 34px;
            line-height: 34px;
            background: #f7f7f7;
            border-radius: 20px;
            span {
              padding: 6px 12px;
              &:nth-child(2) {
                font-size: 22px;
                font-weight: bolder;
              }
              &:nth-child(odd) {
                color: #ababab;
                font-size: 30px;
              }
            }
          }
        }
      }
    }
  }
}
.title_box {
  height: 47px;
  line-height: 47px;
  padding: 7px 0px;
  text-align: center;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-around;
  div:nth-child(odd){
      flex: 1;
      font-size: 18px;
  }
  .title {
    flex: 6;
    font-size: 20px;
  }
}
</style>
